<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo_list</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="dist/css/sm.css">
    <link rel="stylesheet" href="dist/css/sm-extend.css">
    <link rel="stylesheet" href="css/demo_user.css">
</head>
<body>
<style>
    .calc_num {
        width: 90px;
        height: 30px;
        display: block;
    }
    .calc_num .btn_reduce {
        width: 24px;
        height: 30px;
        float: left;
        background: url("images/detail/calc_num.png");
        background-repeat: no-repeat;
        background-position:-10px -170px;
    }
    .calc_num .btn_reduce_hover {
        background-position:-10px -130px;
    }
    .calc_num .btn_reduce_disable {
        background-position:-10px -210px;
    }
    .calc_num .btn_add {
        width: 24px;
        height: 30px;
        float: left;
        background: url("images/detail/calc_num.png");
        background-repeat: no-repeat;
        background-position:-10px -10px;
    }
    .calc_num .btn_add_hover {
        background-position:-10px -50px;
    }
    .calc_num .btn_add_disable {
        background-position:-10px -90px;
    }
    .calc_num input.text {
        width: 40px;
        height: 30px;
        *height: 26px;
        *line-height: 26px;
        float: left;
        display: inline-block;
        box-sizing: border-box;
        border: 1px solid #dddddd;
        border-left: none;
        border-right: none;
        text-align: center;
    }

</style>
<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
<div class="page-group">
    <!-- 单个page ,第一个.page默认被展示-->
    <div class="page">
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="calc_num" id="mx_clac">
                <a class="btn_reduce btn_reduce_disable"></a>
                <input name="number" type="text" class="text" id="number" value="1">
                <input type="hidden" name="miaosha_attr" id="miaosha_attr" value="">
                <a class="btn_add"></a>
            </div>
        </div>
    </div>

    <!-- 其他的单个page内联页（如果有） -->
</div>
<script type="text/javascript" src="assets/js/zepto.js"></script>
<script src="dist/js/sm.js" type="text/javascript" charset="utf-8"></script>
<script src="dist/js/sm-extend.js" type="text/javascript" charset="utf-8"></script>
<script src="dist/js/sm-city-picker.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/config.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="assets/js/common.js" type="text/javascript" charset="utf-8"></script>-->
<script src="assets/js/iscroll.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
        //最大值默认数量
        var maxNum = parseInt(10);
        var minNum = parseInt(1);
        $(".btn_reduce").click(goods_cut);
        function goods_cut(){
            $this_num=$(".calc_num input[name=number]").val();
            var Num = parseInt($this_num);
            if(Num>minNum){
                Num=Num-1;
                $(this).closest(".calc_num").find(".text").val(Num);
                if (Num<minNum){
                    $(this).closest('.calc_num').find('.btn_add').removeClass('btn_add_disable');
                    $(".calc_num :text").val(minNum);
                }
            }
            else {
                $(this).closest('.calc_num').find('.btn_reduce').addClass('btn_reduce_disable');
            }
        }
        $(".btn_add").click(goods_add);
        function goods_add(i){
            //            设置购买上线
            $this_num=$(".calc_num input[name=number]").val();
            var Num = parseInt($this_num);
            if(Num>0){
                Num=Num+1;
                $(this).closest(".calc_num").find(".text").val(Num);
                $(this).closest('.calc_num').find('.btn_reduce').removeClass('btn_reduce_disable');
                console.log(maxNum);
                if(Num>maxNum){
                    $(this).closest('.calc_num').find('.btn_add').addClass('btn_add_disable');
                    $(".calc_num #number").val(maxNum);
                }
            }
        }
        $(".calc_num input[name=number]").blur(function(){
            $nowNum = $(this).val();
            if($nowNum<1){
                $(this).closest(".calc_num").find(".text").val(minNum);
                alert('超过可输入的上限数量');
            }
            else{
                if($nowNum>maxNum){
                    $(this).closest(".calc_num").find(".text").val(maxNum);
                    alert('低于可输入的下限数量');
                }
            }
        });

})
</script>
</body>
</html>